import QtQuick 1.0
import "boris.js" as BorisGlobal

FocusScope {
    id: rootScope
    x: borisListView.x; y: borisListView.y
    width: borisListView.width; height: borisListView.height

    signal borisIndexChanged(int borisIndex)

    Rectangle {
        id: root
        width: parent.width
        height: parent.height
        opacity: 1

        signal clicked()

        Component {
            id: borisListDelegate
            Item {
                width: borisListView.width; height: 53

                MouseArea {
                       anchors.fill: parent
                       onClicked: {
                           console.log("ye-ye");
                       }
                }

                Column {
                    Text { text: BorisGlobal.toOneLineString(name); font.bold: true /* font.pointSize: 10; font.underline: true */}
                    Row {
                        spacing: 20
                        Text { text: BorisGlobal.formatDistance(model.modelData.distance); font.pointSize: 10; /*font.bold: true*/ }
                        /* Text { text: '<i>' + BorisGlobal.formatAngle(model.modelData.bearing) + '</i>'; anchors.bottom: parent.bottom } */
                    }
                }

                Direction {
                    id: compass
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    width: parent.height - 2; height: parent.height-2
                    bearing: model.modelData.bearing
                }

                Keys.onPressed: {
                    console.log("BorisListItem key pressed: " + event.key)
                }

            }
        }

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                rootScope.focus = true
                console.log("MoseArea")
            }
        }

        ListView {
            id: borisListView
            width: parent.width
            height: parent.height
            anchors.fill: parent
            delegate: borisListDelegate
            highlight: Rectangle {
                radius: 3
                color: "lightsteelblue";
            }

            spacing: 2

            onCurrentIndexChanged : {
                console.log("BorisList index changed: " + currentIndex);
                rootScope.borisIndexChanged(currentIndex);
            }

            Keys.onPressed: {
                console.log("BorisListView key pressed: " + event.key)
            }

            focus: true
            model: borisModel
        }

        Keys.onPressed: {
            console.log("BorisList key pressed: " + event.key)
        }

    }

    Keys.forwardTo: [borisListView]

    onActiveFocusChanged: {
        console.log("BorisList focus changed. scope = " + activeFocus + "; list: " + borisListView.activeFocus)
    }
}
